<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">

    <div class="static"  v-bind:class="{ active: isActive, 'text-danger': hasError }">111</div>
    <div v-bind:class="classObject">classObject</div>

</div>
<div id="app1">
    <div v-bind:class="classObject">classObject</div>
    <div v-bind:class="[activeClass, errorClass]">activeClass, errorClass</div>
</div>

<div id="app2">
    <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">123</div>

    <div v-bind:style="styleObject">456</div>

    <div :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }">789</div>
    <!--这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，-->
</div>
<script>
   new Vue({
        el: '#app',
        data: {
            isActive:true,
            hasError:true,

            classObject:{
                active: true,
                'text-danger': true
            },

        },

    })

   new Vue({
       el: '#app1',
       data: {
           isActive: true,
           error: null,
           activeClass: 'active',
           errorClass: 'text-danger',
       },
       computed: {
           classObject: function () {
               return {
                   active: this.isActive && !this.error,
                   'text-danger': this.error && this.error.type === 'fatal'
               }
           }
       }

   })

   new Vue({
       el: '#app2',
       data: {
           activeColor: 'red',
           fontSize: 30,
           styleObject: {
               color: 'blue',
               fontSize: '50px'
           }
       },


   })

</script>

</body>
</html>